import React from 'react';
// 增加对ipynb解析
import 'ipynb2html/dist/notebook.min.css';
import 'katex/dist/katex.min.css';

export default class Ipynb extends React.Component {
  state = {
    ipynbRender: null,
  };

  componentDidMount() {
    this.renderIpynb();
  }

  renderIpynb = async () => {
    const ipynb2html = await import(
      /* webpackChunkName: "ipynb2html" */
      'ipynb2html/dist/ipynb2html-full.min.js'
    );
    this.setState({
      ipynbRender: ipynb2html.render,
    });
  };

  render() {
    const { ipynbRender } = this.state;
    const { blob } = this.props;
    if (!ipynbRender) {
      return null;
    }
    return (
      <div
        className="ipynb-body"
        style={{ padding: '0 40px' }}
        dangerouslySetInnerHTML={{ __html: ipynbRender(JSON.parse(blob)).outerHTML }}
      />
    );
  }
}
